<template>
  <div class="app-container">
    <el-dialog :title="pageTitle" :visible.sync="dialogFormVisible" :before-close="beforeClose" width="60%">
      <el-form :label-position="labelPosition">

        <el-form-item label="金额来源：" :label-width="formLabelWidth">
          <template>
            <div>
              <el-radio-group v-model="form.type" @change="inputRadio($event)">
                <el-radio-button label="1">订单金额</el-radio-button>
                <el-radio-button label="2">订单利润</el-radio-button>
                <el-radio-button label="3">商品</el-radio-button>
              </el-radio-group>
            </div>
          </template>
        </el-form-item>

        <el-form-item label="分享级数：" :label-width="formLabelWidth">
          向上分享 <el-input-number v-model="form.num" :min="0" size="medium" controls-position="right" @change="inputRadio($event)" /> 级
        </el-form-item>

        <el-form-item label="分享方式：" :label-width="formLabelWidth">
          <template>
            <div>
              <el-radio-group v-model="form.method" @change="inputRadio($event)">
                <el-radio-button label="1">推荐关系</el-radio-button>
                <el-radio-button label="2">获得人身份</el-radio-button>
                <el-radio-button label="3">推荐 + 身份</el-radio-button>
              </el-radio-group>
            </div>
          </template>
        </el-form-item>

        <div v-for="val in form.inputRadio" :key="val.id" class="border_input" v-if="form.type != 3 || form.method != 1">
          <el-form-item :label="val.text" :label-width="formLabelWidth">
            <el-input-number v-model="val.radio" :min="0" size="medium" controls-position="right" /> %
          </el-form-item>
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="canel">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { iniShare, inputRadio, handle } from '@/api/share'
export default {
  name: 'ShareHandle',
  data() {
    return {
      labelPosition: 'right',
      formLabelWidth: '220px',
      pageTitle: '店铺分享经济编辑界面',
      dialogFormVisible: false,
      id: '',
      title: '',
      options: [], // label 文字 / value 等级
      form: {
        type: 1, // 订单金额1/订单利润2/商品3
        num: 2, // 分享级数设置
        method: 1, // 关系1/身份2/关系和身份3
        inputRadio: [
          { 'rela': 1, 'text': '第一代的比例：', 'radio': 0 },
          { 'rela': 2, 'text': '第二代的比例：', 'radio': 0 }
          // 根据 method 和 num 来确认
          // grade 和 rela 用来形成 指定的文字, 并帮助最终形成
          // { 'grade': 0, 'text': '会员的比例', 'radio': 0 },
          // { 'grade': 1, 'text': 'vip的比例', 'radio': 0 }

          // { 'rela': 1, 'grade': 0, 'text': '第1代会员的比例', 'radio': 0 },
          // { 'rela': 1, 'grade': 1, 'text': '第1代vip的比例', 'radio': 0 }
          // { 'rela': 2, 'grade': 0, 'text': '第2代会员的比例', 'radio': 0 },
          // { 'rela': 3, 'grade': 1, 'text': '第2代vip的比例', 'radio': 0 }
        ]
      }
    }
  },

  methods: {
    beforeClose() {
      this.canel()
    },

    // 进入界面事件
    ini(id, title) {
      // 初始化 店铺等级 数据
      this.id = id
      this.title = title
      this.listLoading = true
      this.dialogFormVisible = true
      this.pageTitle = '[' + this.id + ': ' + this.title + '] 店铺分享经济编辑界面'
      var params = {}
      params.id = id

      this.iniShare(params)
    },

    // 初始化界面赋值
    iniShare(params) {
      iniShare(params).then(response => {
        this.form = response.data.data
        console.log(this.form)
      })
    },

    // 奖金来源/分享级数/分享方式 改变时 比例框变动
    inputRadio(e) {
      // 获取 奖金来源/分享级数/分享方式 , 得出输出框数目 和 对应文字(后台方法)
      console.log(e)
      var params = {}
      params.store_id = this.id
      params.type = this.form.type
      params.num = this.form.num
      params.method = this.form.method
      this.getInputRadio(params)
    },

    // [后台请求]奖金来源/分享级数/分享方式 改变时 比例框变动
    getInputRadio(params) {
      inputRadio(params).then(response => {
        console.log(response.data)
        this.form.inputRadio = response.data.inputRadio
      })
    },

    // 关闭界面事件
    canel() {
      this.dialogFormVisible = false
    },

    // 提交事件
    sure() {
      console.log(this.form)
      handle({ data: this.form, id: this.id }).then(res => {
        console.log(res)
        Message({
          message: res.data.info,
          type: 'success',
          duration: 2000
        })
        this.$emit('afterSave')
        this.canel()
      })
    }
  }
}
</script>
<style>
.border_input{
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 10px 20px;
  margin: 20px;
}
.block{
  margin-top: 20px;
}
</style>
